<!-- 任务状态监控 -->
<template>
  <div class="container">
    <el-form>
      <el-form-item label="当前显示区域">
        <el-select v-model="region" size="mini" placeholder="请选择活动区域">
          <el-option
            v-for="(item, index) in regionOption"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="listBox">
      <div class="leftBox">
        <p class="title">巡视任务超时列表</p>
        <span>巡视超时任务数量：{{ tourList.length }}</span>
        <el-table :data="tourList" style="width: 100%">
          <el-table-column
            prop="bedName"
            label="床位名称"
            width="90px"
          ></el-table-column>
          <el-table-column
            prop="staffName"
            label="员工姓名"
            width="90px"
          ></el-table-column>
          <el-table-column
            prop="finishTime"
            label="巡视结束时间"
          ></el-table-column>
          <el-table-column
            prop="timeOutPeriod"
            label="超时时间"
          ></el-table-column>
        </el-table>
      </div>
      <div class="rightBox">
        <p class="title">求助任务超时列表</p>
        <span>求助超时任务数量：{{ seekHelpList.length }}</span>
        <el-table :data="seekHelpList" style="width: 100%">
          <el-table-column
            prop="bedName"
            label="床位名称"
            width="90px"
          ></el-table-column>
          <el-table-column
            prop="staffName"
            label="员工姓名"
            width="90px"
          ></el-table-column>
          <el-table-column
            prop="seekHelpTime"
            label="发起求助时间"
          ></el-table-column>
          <el-table-column prop="waitTime" label="已等待时长"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >派单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹出框 -->
        <el-dialog title="" :visible.sync="showRedactPopup" width="40%" center>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-position="left"
            label-width="100px"
          >
            <p>快速指派：（以下为当前求助设备所属区域下的员工）</p>
            <div style="padding: 12px 0">
              <el-radio-group v-model="form.staff">
                <el-radio
                  v-for="(item, index) in staffList"
                  :key="index"
                  :label="item.name"
                  name="type"
                ></el-radio>
              </el-radio-group>
            </div>
            <el-form-item label="搜索指派：" prop="search" size="mini">
              <el-col :span="12" style="padding-right: 18px">
                <el-input :span="12" v-model="form.search" />
              </el-col>
              <el-button type="primary" size="mini">搜索</el-button>
            </el-form-item>
            <div>当前订单将指派给：{{ form.search }}</div>
            <div class="submitBox">
              <el-button type="primary" @click="onSubmit('form')" size="mini">确认分配</el-button>
            </div>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
export default {
  components: {},
  data() {
    return {
      showRedactPopup: false,
      region: "", //区域
      regionOption: [
        { label: "万寿楼一楼", value: "firstFloor" },
        { label: "万寿楼二楼", value: "secondFloor" },
        { label: "万寿楼三楼", value: "thirdFloor" },
      ],
      tourList: [
        {
          bedName: "WS254",
          staffName: "苏都",
          finishTime: "2020-10-11 09:23:23",
          timeOutPeriod: "1天4时32分",
        },
        {
          bedName: "WS254",
          staffName: "苏都",
          finishTime: "2020-10-11 09:23:23",
          timeOutPeriod: "1天4时32分",
        },
      ],
      seekHelpList: [
        {
          bedName: "WS254",
          staffName: "苏都",
          seekHelpTime: "2020-10-11 09:23:23",
          waitTime: "1天4时32分",
        },
      ],
      form: {
        staff: "",
        search: "",
      },
      staffList: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
      ],
      rules: {
        staff: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    handleClick(row) {
      this.showRedactPopup = true;
      console.log(row);
    },
    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message('submit!')
          } else {
            this.$message('error submit!!')
            return false
          }
        })
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
};
</script>
<style lang='scss' scoped>
.container {
  padding: 20px;
  .listBox {
    display: flex;
    justify-content: space-between;
    .title {
      text-align: center;
      font-size: 22px;
      font-weight: 600;
      color: #666;
    }
    .leftBox {
      width: 48%;
    }
    .rightBox {
      width: 48%;
    }
  }
  .submitBox{
    padding: 14px 0;
    display: flex;
    justify-content: center;
  }
}
</style>
